<template>
  <div class="">
    <div class="c-ph24 c-p c-w100 c-flex-row c-justify-sb c-bg-white c-aligni-center c-bd-b1-f6">
      <div class="c-contextX-scroll c-ws-n c-bg-white" id="cityScroll">
        <div v-for="(item, index) in cityArr" :key="index" class="c-inlineblack c-textAlign-c c-mr40 c-fs24 c-fc-xblack" @click="changeCity(item, index)">
          <span class="c-inlineblack c-ph5 c-pt20 c-pb12">{{item.areaName}}</span>
          <div v-if="cityIndex == index" class="c-ww32 c-hh6 theme-bg-gradient c-br4 c-m-0auto"></div>
        </div>
      </div>
      <span class="iconfont c-pl14 c-pr24 c-fs30 c-fc-sblack section-icon" @click="showMoreInfo = true">&#xe8a3;</span>
    </div>
    <div class="c-ph24 c-mt20 c-w100" v-if="cityArr && !!cityArr[cityIndex]">
      <div class="c-fc-white auditing c-hh120 c-w100" :class="cityArr[cityIndex].auditStatus == 1 ? 'c-flex-row c-flex-center' : ''">
        <span class="iconfont c-fs28 c-fw-b c-flex-row c-aligni-center" v-if="cityArr[cityIndex].auditStatus == 1"><span class="c-pr16 c-fs38">&#xe70f;</span>审核中!</span>
        <div class="c-fw-b c-w100 c-h c-flex-row c-aligni-center c-pl16" v-else>
          <div class="c-ww88 c-hh88 c-brp50 c-bg-white c-flex-row c-flex-center">
            <img class="c-ww80 c-hh80 c-brp50 imgCloseBig" :src="$addXossFilter(userHeadImg, require('@/assets/activity_defult.png'))" alt="" />
          </div>
          <div class="c-pl16 c-w0 c-flex-grow1 c-fs20">
            <div class="c-fs28 c-fw-b">{{cityArr[cityIndex].areaLevel == 1 ? '省代理' : cityArr[cityIndex].areaLevel == 2 ? '市代理' : '区代理'}}</div>
            <div class="c-pt10">{{userName}}</div>
          </div>
        </div>
      </div>
      <div v-if="cityArr && cityArr[cityIndex].auditStatus == 2">
        <my-small-tabbar :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeType" class="c-pt16" :isScroll="true" :flexClass="flex-start"></my-small-tabbar>
        <div v-if="tabIndex == 0 && userNum" class="c-flex-row c-mt16 c-fs20">
          <div class="c-hh48 c-br8 c-p" @click="changeUserType(1)" :style="{width: computeWidth(userNum.normalNum)}">
            <div class="c-h c-br8 c-w100 c-ph20" :class="userType == 1 ? 'theme-bg c-opacity10' : 'bg-gray'"></div>
            <div class="c-pa c-p-t0 c-p-l0 c-h c-w100 c-ws-n c-flex-row c-flex-center" :class="userType == 1 ? 'theme-fc' : 'c-fc-sblack'">直推用户({{userNum.normalNum}})</div>
          </div>
          <div class="c-hh48 c-br8 c-p c-ml10" @click="changeUserType(2)" :style="{width: computeWidth(userNum.indirectNum)}">
            <div class="c-h c-br8 c-w100 c-ph20" :class="userType == 2 ? 'theme-bg c-opacity10' : 'bg-gray'"></div>
            <div class="c-pa c-p-t0 c-p-l0 c-h c-w100 c-ws-n c-flex-row c-flex-center" :class="userType == 2 ? 'theme-fc' : 'c-fc-sblack'">间推用户({{userNum.indirectNum}})</div>
          </div>
        </div>
        <div v-if="tabIndex == 2 && userNum" class="c-flex-row c-mt16 c-fs20">
          <div class="c-hh48 c-br8 c-p" :style="{width: computeWidth(userNum.areaAgentNum)}">
            <div class="c-h c-br8 c-w100 c-ph20 theme-bg c-opacity10"></div>
            <div class="c-pa c-p-t0 c-p-l0 c-h c-w100 c-ws-n c-flex-row c-flex-center theme-fc">旗下用户({{userNum.areaAgentNum}})</div>
          </div>
        </div>
        <div class="c-mt20 c-fs20">
          <template v-if="tabIndex !=1">
            <div class="c-br10 c-bd1-f6 c-ph20 c-pv20 c-mb20" v-for="(item, index) in userInfo" :key="index">
              <div class="c-flex-row">
                <img class="c-ww80 c-hh80 c-brp50 imgCloseBig" :src="$addXossFilter(item.headimgurl, require('@/assets/activity_defult.png'))" alt="" />
                <div class="c-pl16 c-w0 c-flex-grow1">
                  <div class="c-fw-b c-fs24">{{item.nickname}}</div>
                  <div class="c-flex-row c-aligni-center c-flexw-wrap">
                    <identity-com class="c-mt10" :vipType="item.vipType"></identity-com>
                    <template v-if="item.areaInfo.length > 0">
                      <div v-for="(cItem, cIndex) in item.areaInfo" :key="cIndex" class="c-pl16 c-mt10 c-hh36 c-ph10 c-p c-flex-row c-flexw-wrap" :style="{width: computeLength(cItem.area)}">
                        <div class="theme-bg c-opacity10 c-h c-ph10 c-pv2 c-br8 c-w100"></div>
                        <div class="c-pa c-p-t0 c-p-l0 c-h c-flex-row c-flex-center theme-fc c-ws-n c-w100">{{cItem.area}}{{cItem.areaLevel == 1 ? '省代' : cItem.areaLevel == 2 ? '市代' : '区代'}}</div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="c-flex-row c-aligni-center c-justify-sb c-pt20 c-fc-gray">
                <div>ID: <span class="c-fc-xblack"> {{item.userId}}</span></div>
                <div>注册时间: <span class="c-fc-xblack"> {{item.createdAt}}</span></div>
              </div>
              <div class="c-flex-row c-aligni-center c-justify-sb c-pt20 c-fc-gray">
                <div>真名: <span class="c-fc-xblack"> {{item.realName ? item.realName : '--'}}</span></div>
                <div>最近活跃: <span class="c-fc-xblack"> {{item.activeTime ? item.activeTime : '--'}}</span></div>
              </div>
              <div class="c-pt20 c-fc-gray">
                <div>推荐人: <span class="c-fc-xblack"> {{item.rNickname ? item.rNickname : '--'}}(ID:{{item.refereeUserId ? item.refereeUserId : '--'}})</span></div>
              </div>
              <div class="c-pt20 c-fc-gray">
                <div>所在地: <span class="c-fc-xblack"> {{item.userArea ? item.userArea : '--'}}</span></div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="c-fc-gray">可在"奖学金--我的账户"查看收益明细</div>
            <div class="c-flex-row c-mt16 c-pv16 c-ph20 c-bg-sgray">
              <div v-for="(item, index) in incomeTable" :key="index" class="c-w33" :class="index == 0 ? '' : 'c-textAlign-r'">{{item.title}}</div>
            </div>
            <div v-for="(item, index) in incomeList" :key="index" class="c-flex-row c-fs22 c-pv20 c-bd-b1-f6 c-ph20">
              <div class="c-w33 c-fc-gray">{{item.dataTime}}</div>
              <div class="c-w33 c-textAlign-r">{{'￥' | iosPriceFilter}}{{item.areaPayMoney}}</div>
              <div class="c-w33 c-textAlign-r">{{'￥' | iosPriceFilter}}{{item.areaIncome}}</div>
            </div>
          </template>
          <loading-status-tem :dataStatus="dataStatus" noDataText="暂无数据"></loading-status-tem>
        </div>
      </div>
    </div>
    <!-- 申请会长图标 -->
    <div class="c-pf c-p-r24 c-p-b60">
      <div class="c-bg-white c-brp50">
        <div @click="linkToApplyAreaAgent" class="c-mb20 c-ww80 c-hh80 theme-bg-gradient theme-box-shadow c-fs20 c-fc-white c-flex-row c-justify-center c-aligni-center c-brp50">
          <span class="c-textAlign-c">申请<br>代理</span>
        </div>
      </div>
      <div @click="linkToApplyRecords" class=" c-ww80 c-hh80 c-bg-white c-box-shadow7 c-fs20 c-fc-xblack c-flex-row c-justify-center c-aligni-center c-brp50">
        <span class="c-textAlign-c">申请<br>进度</span>
      </div>
    </div>
    <!-- 点击图标查看跟多的城市信息 -->
    <cj-popup v-model="showMoreInfo" position="bottom" >
      <div class="c-bg-white c-ph48 c-maxh600 c-contexty-auto">
        <div v-for="(item, index) in cityArr" :key="index"
          class="c-fs24 c-fc-222 c-pv30 " :class="{'theme-fc': cityIndex == index, 'c-bd-b1-mgray': index < cityArr.length-1}"
          @click="changeCity(item, index)">{{item.areaName}}</div>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import identityCom from "@/components/templates/common/identityCom.vue";
import validateVipType from './validateVipType'
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: 'OldAreaAgent',
  mixins: [validateVipType],
  components: {
    MySmallTabbar,
    loadingStatusTem,
    identityCom
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      userHeadImg: localStorage.getItem('userHeadImg'),
      userName: localStorage.getItem('userName'),
      cityArr: [],
      showMoreInfo: false,
      currentLoading: false,
      comeFrom: 0, // 0 新版区域代理(胜者定制) 1徐鸿定制 2: 旧版区域代理
      tabList: [{
        title: '区域用户',
        index: 0,
      }, {
        title: '区域业绩',
        index: 1,
      }, {
        title: '旗下代理',
        index: 2,
      }],
      tabIndex: 0,
      cityIndex: 0,
      provinceId: '',
      cityId: '',
      areaId: '',
      userType: 1,
      areaIndex: 0,
      userInfo: [],
      dataStatus: 'HAS_MORE_DATA',
      areaUserType: 0, // 0直推用户 1间推用户
      userNum: null,
      incomeTable: [{
        title: '月份',
        index: 0,
      }, {
        title: '区域业绩',
        index: 1,
      }, {
        title: '区域收益',
        index: 2,
      }],
      incomeList: [], //区域业绩
    }
  },
  computed: {
    showMoreAll() { // 是否展示下拉展开更多
      this.$nextTick(() => {
        var isShow = false
        if (this.$refs[`noticeSpan`].offsetHeight > this.$refs[`noticeDiv`].offsetHeight) {
          isShow = true
        } else {
          isShow = false
        }
        return isShow
      })
    }
  },
  watch: {

  },
  methods: {
    getAreaUserPage() {
      utilJs.getMethod(`${global.apiurl}areaAgent/getUserApplyArea`, res => {
        if (res.length > 0) {
          this.cityArr = res;
          this.provinceId = res[0].provinceId;
          this.cityId = res[0].cityId;
          this.areaId = res[0].areaId;
          if (res[0].auditStatus == 2) {
            this.getUser()
          }
        } else {
          this.$routerGo(this, "replace", {
            path: "/homePage/agent/agentIndex",
            query: {
              fromType: "areaAgent",
            }
          })
        }
      })
    },
    changeCity(item, index) { // 切换城市
      if (this.currentLoading) {
        return;
      }
      this.cityIndex = index;
      this.provinceId = this.cityArr[index].provinceId;
      this.cityId = this.cityArr[index].cityId;
      this.areaId = this.cityArr[index].areaId;
      pageIndex = 1;
      this.userInfo = [];
      this.incomeList = [];
      if (item.auditStatus == 2) {
        if (this.tabIndex == 0 || this.tabIndex == 2) {
          this.getUser()
        } else {
          this.getAreaAgentIncome()
        }
      }
      this.showMoreInfo = false;
    },
    getUser() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(`${global.apiurl}areaAgent/myCustomers?page=${pageIndex}&limit=${LIMIT}&provinceId=${this.provinceId}&cityId=${this.cityId}&areaId=${this.areaId}&type=${this.userType}`, res => {
        this.userNum = res;
        if (pageIndex == 1) {
          this.userInfo = res.list.data;
        } else {
          this.userInfo = [...this.userInfo, ...res.list.data]
        }
        if (res.list.data && res.list.data.length < LIMIT) {
          this.dataStatus = pageIndex == 1 && res.list.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = "HAS_MORE_DATA";
          pageIndex++;
        }
      })
    },
    changeType(type) {
      this.tabIndex = type;
      this.userType = type + 1;
      pageIndex = 1;
      this.userInfo = [];
      this.dataStatus = 'HAS_MORE_DATA';
      if (type == 0 || type == 2) {
        this.getUser()
      } else {
        this.getAreaAgentIncome()
      }
    },
    changeUserType(type) {
      this.userType = type;
      pageIndex = 1;
      this.userInfo = [];
      this.getUser()
    },
    computeLength(val) {
      if (!!val) {
        return `${(val.length + 2) * 0.65}rem`;
      }
    },
    computeWidth(val) {
      return `${(val.toString().length + 4) * 0.65}rem`;
    },
    getAreaAgentIncome() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(`${global.apiurl}areaAgent/getAreaAgentIncome?page=${pageIndex}&limit=${LIMIT}&provinceId=${this.provinceId}&cityId=${this.cityId}&areaId=${this.areaId}&type=${this.userType}`, res => {
        if (pageIndex == 1) {
          this.incomeList = res.data;
        } else {
          this.incomeList = [...this.incomeList, ...res.data]
        }
        if (res.data && res.data.length < LIMIT) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = "HAS_MORE_DATA";
          pageIndex++;
        }
      })
    },
    getAreaAgentConf() {
      utilJs.getMethod(`${global.apiurl}areaAgent/getAreaAgentConf`, res => {
        if (res.showIncome == 0) {
          this.tabList = this.tabList.filter(item => {
            return item.title != "区域业绩"
          })
        }
      })
    },
    linkToApplyAreaAgent() { // 点击申请代理
      this.$routerGo(this, "push", {
        path: '/homePage/newAreaUser/apply',
        query: {
          from: 'apply',
          comeFrom: this.comeFrom,
        }
      })
    },
    linkToApplyRecords() { // 点击申请记录
      this.$routerGo(this, "push", {
        path: '/homePage/newAreaUser/applyRecords',
        query: {
          comeFrom: this.comeFrom,
        }
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if ((this.tabIndex == 0 || this.tabIndex == 2) && this.dataStatus == 'HAS_MORE_DATA' && this.userInfo.length > 0) {
          this.getUser();
        } else if (this.dataStatus == 'HAS_MORE_DATA' && this.incomeList.length > 0) {
          this.getAreaAgentIncome();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = '区域代理';
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/newAreaUser/apply?comeFrom=${this.comeFrom}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
      //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    setDocumentTitle('区域代理');// eslint-disable-line
    this.comeFrom = this.$route.query.comeFrom;
    this.dataStatus = 'HAS_MORE_DATA';
    this.userInfo = [];
    this.incomeList = [], //区域业绩
    this.userNum = null;
    this.tabIndex = 0;
    this.cityIndex = 0;
    this.areaIndex = 0;
    this.areaUserType = 0;
    this.provinceId = '',
    this.cityId = '',
    this.areaId = '',
    this.userType = 1,
    this.getAreaUserPage();
    this.getAreaAgentConf();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.section-icon {
  -moz-box-shadow: -6px 1px 10px #fff;
  -webkit-box-shadow: -6px 1px 10px #fff;
  box-shadow: -6px 1px 10px #fff;
  position: absolute;
  right: 0;
  z-index: 10;
  background-color: #fff;
}
.auditing {
  background: url('../../../assets/i/wap/newAreaAgent/auditing.jpg') no-repeat;
  background-size: cover;
}
.bg-blue {
  background: #4893F8;
}
.bg-gray {
  background: #F2F2F2;
}
</style>